<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
    <!-- 引入标题图标文件 -->
    <link rel="shortcut icon" href="../../../favicon.ico" type="image/x-icon">
    <!-- 引入公共样式 CSS 文件 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <!-- 引入初始化样式 CSS 文件 -->
    <link rel="stylesheet" href="../../../css/base.css">
    <!-- 引入姚昶自建样式 CSS 文件 -->
    <link rel="stylesheet" href="././CSS/ycCSS.css">
</head>

<body>
    <div class="y2wrap">
        <div class="y2menu">
            <i class="y2menuback"></i>
            <div class="y2menuT">
                <div class="y2menuLG" style="cursor: pointer;">
                    <i class="y2iconpay"></i>
                    付费音乐包
                </div>
                <ul class="y2Mlist">
                    <li>
                        <a href="">特权介绍</a>
                    </li>
                    <li>
                        <a href="">成长体系</a>
                    </li>
                </ul>
                <div class="y2login">
                    <span class="y2denglu">
                        <a href="" class="y2lgdl">登录</a>
                    </span>
                    <a href="" class="y2lgkt">开通付费音乐包</a>
                </div>
            </div>
        </div>
        <div class="y2main">
            <div class="y2main1">
                <div class="y2main110">
                    <div class="y2main111">
                        <a href="https://pay.qq.com/ipay/index.shtml?c=qqmsey&aid=music.pc.ffb.gw.sj">
                            <img src="CSS/ycpics/y2p1.webp" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="y2main2">
                <div class="y2main210">
                    <h2 class="y2main211">
                        <span>付费音乐包</span>
                    </h2>
                </div>
                <p class="y2main220">付费音乐包为您提供付费音乐下载、SQ音质试听、专属图标等特权，与您一起支持偶像正版音乐！
                </p>
                <div class="y2main230">
                    <ul>
                        <li>
                            <i></i>
                            <p class="y2main231">
                                <strong>12元</strong>豪华付费音乐包
                            </p>
                            <p class="y2main232">(500首/月)</p>
                            <a class="y2main233" force="0" href="">立即开通</a>
                        </li>
                        <li>
                            <i style="background-position: 0 0;"></i>
                            <p class="y2main231">
                                <strong style="color: #fec649;">8元</strong>付费音乐包
                            </p>
                            <p class="y2main232">(300首/月)</p>
                            <a class="y2main233" force="0" href="">立即开通</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="y2main3">
                <div class="y2main310">
                    <h2 class="y2main211">
                        <span>特权介绍</span>
                    </h2>
                </div>
                <div class="y2main320">
                    <ul>
                        <li>
                            <a href="" style="background-image: url(css/ycpics/y2ad1.webp);">
                                <i></i>
                                <p>付费音乐下载</p>
                            </a>
                        </li>
                        <li>
                            <a href="" style="background-image: url(css/ycpics/y2ad2.webp);">
                                <i style="background-position: 0 -453px;width: 82px;height: 81px;"></i>
                                <p>SQ音乐视听</p>
                            </a>
                        </li>
                        <li>
                            <a href="" style="background-image: url(css/ycpics/y2ad3.webp);">
                                <i style="background-position: -340px -311px;width:83px;height: 80px;"></i>
                                <p>专属图标</p>
                            </a>
                        </li>
                        <li>
                            <a href="" style="background-image: url(css/ycpics/y2ad4.webp);">
                                <i style="background-position: -243px -311px;width: 85px;height: 80px;"></i>
                                <p>演唱会特权</p>
                            </a>
                        </li>
                        <li>
                            <a href="" style="background-image: url(css/ycpics/y2ad5.webp);">
                                <i style="background-position: -284px -169px;width: 102px;height: 70px;"></i>
                                <p>游戏特权</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="y2main4">
                <div class="y2main410">
                    <h2 class="y2main211">
                        <span>付费专辑推荐</span>
                    </h2>
                </div>
                <p class="y2main420">
                    <a style="font-size:18px;color:black;" class="y2main421" href="">查看1075725张付费专辑&gt;</a>
                </p>
                <div class="y2main430">
                    <ul>
                        <li>
                            <a href="">
                                <img src="css/ycpics/y2cd1.jpg" alt="">
                            </a>
                            <div style="background:#333">
                                <p class="y2main431">Heartbreak On A Full Moon Deluxe Edition: Cuffing Season - 12 Days
                                    Of Christmas (Explicit)</p>
                                <p class="y2main432">Chris Brown (克里斯·布朗)</p>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <img src="css/ycpics/y2cd2.jpg" alt="">
                            </a>
                            <div style="background: #7f7f7f;">
                                <p class="y2main431">Pay the Man (Remix)</p>
                                <p class="y2main432">Foster The People</p>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <img src="css/ycpics/y2cd3.jpg" alt="">
                            </a>
                            <div style="background:#333">
                                <p class="y2main431">Don't Don't Do It!</p>
                                <p class="y2main432">N.E.R.D</p>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <img src="css/ycpics/y2cd4.jpg" alt="">
                            </a>
                            <div style="background: #7f7f7f;">
                                <p class="y2main431">Pacifisticuffs</p>
                                <p class="y2main432">Diablo Swing Orchestra</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"> //引入jq资源</script>
<script>
if (window.addEventListener)//FF,火狐浏览器会识别该方法
    window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;//W3C
//统一处理滚轮滚动事件
function wheel(event){
    var delta = 0;
    if (!event) event = window.event;
    if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
        delta = event.wheelDelta/120; 
        if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
    } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
        delta = -event.detail/3;
    }
    if (delta)
        handle(delta);
}
//上下滚动时的具体处理函数
function handle(delta) {
    let page=''
        if(delta<0){delta=1,console.log("下")}else{delta=-1,console.log("上")}
        console.log($(window).scrollTop())
        console.log(delta)
        var h1=$('.y2main1').offset().top-80    //0
        console.log($('.y2main1').offset().top-80)//jq获取对象定位的方法，js是直接div.offsetTop
        var h2=$('.y2main2').offset().top-80    //486
        console.log($('.y2main2').offset().top-80)
        var h3=$('.y2main3').offset().top-80    //1125
        console.log($('.y2main3').offset().top-80)
        var h4=$('.y2main4').offset().top-80    //1713
        console.log($('.y2main4').offset().top-80)
        if ($(window).scrollTop()>h4-10){page=delta>0?null:3}
        else if ($(window).scrollTop()>h3-10){page=3+delta}
        else if ($(window).scrollTop()>h2-10){page=2+delta}
        else {page=delta>0?2:null}
        if(page==null){return}
        // page<1?page=1:page>4?page=4:null
        console.log(`应该去第${page}页`)
        $('html, body').animate({scrollTop: ($(`.y2main${page}`).offset().top-80)}, 300)
}
</script>
</html>